<template>
  <div>
      <ul>
          <li>日期:<input v-model="ds.date"/></li>
          <li>得分:<input v-model="ds.score"/></li>
          <li>均匀率:<input v-model="ds.均匀率"/></li>
          <li>压感:<input v-model="ds.压感"/></li>
          <li>需要删除的日期:<input v-model="date"/></li>
      </ul>
<button @click="sel">查询</button>
<button @click="add">添加</button>
<button @click='del'>删除</button>
<button @click="puts">修改</button>
</div>
</template>

<script>
export default {
    data () {
        return {
            ds:{date:'',score:'',均匀率:'',压感:''},
            date:''
        }
    },
methods: {
    //查询刷牙记录
    sel:function(){
         this.$http.get('/api/'+this.ds.date).then(({
                    data,
                    config
                }) =>{
                    //解构语法
                    console.log(data);
                    this.ds=data.data
                })
    },
    //新增刷牙记录
    add:function(){
        this.$http.post('./api/month',this.ds).then(({
            data,
            config
        })=>{
            //解构语法
            console.log(data,config);
            if(data.code == 200) {
                this.$message.success('添加成功');
            } else{
                this.$message.error('添加失败');
            }
        })
    },
    //删除刷牙记录
    del:function(){
        this.$http.delete('/api/'+this.date).then(({
            data,
            config
        })=>{
            console.log(data,config);
            if(data.code == 200){
                this.$message.success('删除成功')
            }else{
                this.$message.error('删除失败')
            }
        })   
},
//修改刷牙得分
puts:function(){
    alert(this.ds.date);
    alert(this.ds.score);
this.$http.put('/api'+this.ds.date,{score:this.ds.score,均匀率:this.ds.均匀率,压感:this.ds.压感})
            .then(({
                data,config
            })=>{
                console.log(data,config);
                if(data.code==200){
                    this.$message.success('修改得分成功')
                    this.$store.commit('getusername',this.ds.score)
                }else{
                    this.$message.error('修改得分失败')
                }
            })
},
}
}
</script>

<style scoped>
ul{
    position: relative;
}
li{
    margin: 0.5rem;
    list-style: none;
    text-align: left;
}
input{
    float: right;
}
button{
    text-align: center;
    background-color: red;
    color: white;
    width: 1rem;
    height: 0.6rem;
    border-radius: 0.3rem;
    border: none;
    margin-left: 5%;
}
</style>